<%inherit file="base2.html"/>
<%block name="content">
<link href="https://magicbox.bkclouds.cc/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="https://magicbox.bkclouds.cc/static_api/v3/bk/css/bk.css" rel="stylesheet">
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/jquery-tabledit-1.2.3/jquery.tabledit.js"></script>


<link href="https://magicbox.bkclouds.cc/static_api/v3/assets/datatables-1.10.7/dataTables.bootstrap.css" rel="stylesheet"/>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/datatables-1.10.7/jquery.dataTables.js"></script>
<script src="https://magicbox.bkclouds.cc/static_api/v3/assets/datatables-1.10.7/dataTables.bootstrap.js"></script>
<table class="table table-bordered" id="example1">
                      <thead>
                          <tr>
                             <th>#</th>
                             <th>学生姓名</th>
                             <th>学生年纪</th>
                             <th>学生国籍</th>

                          </tr>
                      </thead>

                       <tbody>
                          % for row in data:
                                  <tr>
                                      <td class="font-family: sans-serif;">${row['id']} </td>
                                      <td class="font-family: sans-serif;">${row['s_name']}</td>
                                      <td class="font-family: sans-serif;">${row['s_age']}</td>
                                      <td class="font-family: sans-serif;">${row['s_country']}</td>

                                  </tr>
                          % endfor
                          </tbody>

      </table>
      <script type="text/javascript">
          $('#example1').Tabledit({
              url: "${SITE_URL}students/",
              rowKey: 'ops_',

              columns: {
                  identifier: [0, 'aid'],
                  editable: [
                      [1, 's_name'], [2, 's_age'], [3, 's_country']
                  ]
              },
              restoreButton: false,
              buttons: {
                  edit: {
                      class: 'btn btn-sm btn-info',
                      html: '<span class="glyphicon glyphicon-pencil">编辑</span>',
                      action: 'edit'
                  },
                  delete: {
                      class: 'btn btn-sm btn-danger',
                      html: '&nbsp;<span class="glyphicon glyphicon-trash">删除</span>',
                      action: 'delete'
                  },
                  save: {
                      class: 'btn btn-sm btn-success',
                      html: '保存'
                  },
                 confirm: {
                      class: 'btn btn-sm btn-danger',
                      html: '确认'
                  }
              },

                onSuccess: function(data, textStatus, jqXHR) {
                    console.log('onSuccess(data, textStatus, jqXHR)');
                    swal(data['message']);
                    console.log(textStatus);
                    console.log(jqXHR);
                    //window.location.reload()
                    // 获取tr节点id 进行删除
                    var table_id = "ops_"+data['table_id']
                    console.log(table_id);
                    //$("#example1 tr:gt(0):eq(1)").remove();
                    //$(table_id).parent().remove();
                    //$("tr.tabledit-deleted-row text-muted").remove()
                    $("tr#intro")


                },
                onFail: function(jqXHR, textStatus, errorThrown) {
                    console.log('onFail(jqXHR, textStatus, errorThrown)');
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                },
                // onAlways: function() {
                //     console.log('onAlways()');
                // },
                // onAjax: function(action, serialize) {
                //     console.log('onAjax(action, serialize)');
                //     console.log(action);
                //     console.log(serialize);
                // }
          });
      </script>


<script>
    //表格(DataTables)-1，html数据源
    var language = {
      search: '搜索：',
      lengthMenu: "每页显示 _MENU_ 记录",
      zeroRecords: "没找到相应的数据！",
      info: "分页 _PAGE_ / _PAGES_",
      infoEmpty: "暂无数据！",
      infoFiltered: "(从 _MAX_ 条数据中搜索)",
      paginate: {
        first: '首页',
        last: '尾页',
        previous: '上一页',
        next: '下一页',
      }
    }
    $('#example1').dataTable({
      paging: true, //隐藏分页
      ordering: true, //关闭排序
      info: true, //隐藏左下角分页信息
      searching: true, //关闭搜索
      pageLength : 10, //每页显示几条数据
      lengthChange: true, //不允许用户改变表格每页显示的记录数
      language: language //汉化
    });
</script>
</%block>
